<template>
	<view class="container">
		<!-- 会员信息区域 -->
		<view class="member-info-section">
			<view class="section-header">
				<text class="section-title">会员信息</text>
				<button class="query-button" @click="queryMember">查询</button>
			</view>
			<view class="member-details">
				<text class="detail-label">姓名：</text>
				<text class="detail-value">{{ memberName || '张三' }}</text>
			</view>
		</view>
		<!-- 转换类型选择区域 -->
		<view class="conversion-section">
			<!-- 左侧转换源类型 -->
			<view class="type-selector">
				<picker @change="onSourceTypeChange" :value="sourceTypeIndex" :range="sourceTypes" range-key="name">
					<view class="picker-container">
						<text>{{ sourceTypes[sourceTypeIndex].name }}</text>
						<uni-icons type="down" size="16" color="#999" class="icon" />
					</view>
				</picker>
			</view>

			<!-- 转换箭头 -->
			<view class="arrow-container">
				<text class="arrow">→</text>
			</view>

			<!-- 右侧转换目标类型 -->
			<view class="type-selector">
				<picker @change="onTargetTypeChange" :value="targetTypeIndex" :range="targetTypes" range-key="name">
					<view class="picker-container">
						<text>{{ targetTypes[targetTypeIndex].name }}</text>
						<uni-icons type="down" size="16" color="#999" class="icon" />
					</view>
				</picker>
			</view>
		</view>

		<!-- 余额信息 -->
		<view class="balance-info">
			<text class="label">余额</text>
			<text class="balance">5000</text>
		</view>

		<!-- 转换规则 -->
		<view class="rule-info">
			<text class="label">转换规则</text>
			<text class="rule">{{ conversionRate }}</text>
		</view>

		<!-- 转换数量输入 -->
		<view class="input-section">
			<text class="label">转换数量</text>
			<input v-model="conversionAmount" type="number" placeholder="输入转换数量" class="input" />
		</view>

		<!-- 转换获得预览 -->
		<view class="result-section">
			<text class="label">转换获得</text>
			<text class="result">{{ conversionResult }}</text>
		</view>

		<!-- 确定转换按钮 -->
		<view class="button-section">
			<button @click="confirmConversion" class="confirm-button">确定转换</button>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';

	export default {
		name: 'TransformationPage',
		setup() {
			// 转换源类型列表
			const sourceTypes = ref([{
					id: 'deposit',
					name: '预存款'
				},
				{
					id: 'gameCoin',
					name: '游戏币'
				},
				{
					id: 'playCoin',
					name: '游乐币'
				},
				{
					id: 'lottery',
					name: '彩票'
				},
				{
					id: 'electronicLottery',
					name: '电子彩票'
				},
				{
					id: 'points',
					name: '积分'
				}
			]);

			// 转换目标类型列表
			const targetTypes = ref([{
					id: 'deposit',
					name: '预存款'
				},
				{
					id: 'gameCoin',
					name: '游戏币'
				},
				{
					id: 'playCoin',
					name: '游乐币'
				}
			]);

			// 当前选中的源类型索引
			const sourceTypeIndex = ref(0);
			// 当前选中的目标类型索引
			const targetTypeIndex = ref(0);
			// 转换数量
			const conversionAmount = ref('');
			// 转换获得结果
			const conversionResult = ref('0');
			// 转换规则
			const conversionRate = ref('1游戏币=1预存款');

			// 监听转换数量变化，实时计算转换结果
			watch([conversionAmount, sourceTypeIndex, targetTypeIndex], () => {
				calculateConversionResult();
				updateConversionRate();
			});

			// 源类型选择变化
			const onSourceTypeChange = (e) => {
				sourceTypeIndex.value = e.detail.value;
			};

			// 目标类型选择变化
			const onTargetTypeChange = (e) => {
				targetTypeIndex.value = e.detail.value;
			};

			// 计算转换结果
			const calculateConversionResult = () => {
				// 这里简化处理，实际应用中应根据不同的转换类型和规则计算
				const amount = parseInt(conversionAmount.value) || 0;
				// 假设转换比例都是1:1
				conversionResult.value = amount.toString();
			};

			// 更新转换规则显示
			const updateConversionRate = () => {
				const sourceTypeName = sourceTypes.value[sourceTypeIndex.value].name;
				const targetTypeName = targetTypes.value[targetTypeIndex.value].name;
				conversionRate.value = `1${sourceTypeName}=1${targetTypeName}`;
			};

			// 确认转换
			const confirmConversion = () => {
				if (!conversionAmount.value || parseInt(conversionAmount.value) <= 0) {
					uni.showToast({
						title: '请输入有效的转换数量',
						icon: 'none'
					});
					return;
				}

				// 这里添加转换逻辑，可以调用API等
				uni.showToast({
					title: '转换成功',
					icon: 'success'
				});
			};

			// 页面加载时初始化
			// 会员信息
			const memberName = ref('');

			// 查询会员信息
			const queryMember = () => {
				// 模拟查询会员信息
				memberName.value = '张三';
			};

			onMounted(() => {
				calculateConversionResult();
				updateConversionRate();
				// 初始化页面数据
				onSourceTypeChange({
					detail: {
						value: 0
					}
				});
			});

			return {
				sourceTypes,
				targetTypes,
				sourceTypeIndex,
				targetTypeIndex,
				conversionAmount,
				conversionResult,
				conversionRate,
				onSourceTypeChange,
				onTargetTypeChange,
				confirmConversion,
				memberName,
				queryMember
			};
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: this.$t('title.transformation')
			});
		},
	};
</script>

<style scoped>
	.container {
		/* padding: 30rpx 16rpx; */
		background-color: #f5f5f5;
		height: 100%;
		width: 100%;
	}

	.conversion-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.type-selector {
		flex: 1;
	}

	.picker-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 8rpx;
	}

	.arrow-container {
		padding: 0 30rpx;
		color: #e60012;
		font-weight: bold;
	}

	.balance-info,
	.rule-info,
	.input-section,
	.result-section {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		/* border-radius: 16rpx; */
		margin-bottom: 2rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.label {
		font-size: 28rpx;
		color: #666;
	}

	.balance {
		font-size: 32rpx;
		color: #e60012;
		font-weight: bold;
	}

	.rule {
		font-size: 28rpx;
		color: #333;
	}

	.input {
		font-size: 28rpx;
		color: #333;
		text-align: right;
	}

	.result {
		font-size: 32rpx;
		color: #ff6600;
		font-weight: bold;
	}

	.button-section {
		margin-top: 50rpx;
		width: 100%;
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 16rpx;
	}

	.confirm-button {
		background-color: #FF5722;
		color: #fff;
		border-radius: 8rpx;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
	}

	/* 会员信息区域样式 */
	.member-info-section {
		background-color: #ffffff;
		border-radius: 8px;
		padding: 12px 16px;
		margin-bottom: 16px;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}

	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;
	}

	.query-button {
		background-color: #ff5722;
		color: #ffffff;
		border-radius: 4px;
		font-size: 14px;
		padding: 6px 16px;
		line-height: 1.5;
	}

	.query-button::after {
		border: none;
		border-radius: 4px;
	}

	.member-details {
		padding: 8px 0;
	}

	.detail-label {
		font-size: 14px;
		color: #666666;
		margin-right: 8px;
	}

	.detail-value {
		font-size: 14px;
		color: #333333;
	}
</style>